<template>
  <div class="xyt-app">
    <RouterView v-if="queryUserInfoDone" />
  </div>
</template>

<script setup>
import { onMounted, ref, onUpdated } from 'vue';
import { useUserInfo } from './stores/userInfo.js'
import { getUserInfo, getBaseInfos, initWebSocket, getUrlParam } from './utils/utils.js'
import { getUserInfoByUnionId } from './api/userInfo.js'
import { useRoute } from 'vue-router'
let route = useRoute()
let code = ''
let userInfoStore = useUserInfo()
let token = sessionStorage.getItem("token") || ''
let unionId = sessionStorage.getItem("unionId") || ''
let queryUserInfoDone = ref(false)

async function init() {
  let retToken = getUrlParam('token')
  let user = getUrlParam('user')
  if (user) {
    user = JSON.parse(user)
    user.external_user_id = user.id
    userInfoStore.settAttention(true)
    userInfoStore.setUserInfo(user)
    sessionStorage.setItem('userInfo', JSON.stringify(user))
  }
  if (retToken) {
    sessionStorage.setItem('token', retToken)
    userInfoStore.setToken(retToken)
    queryUserInfoDone.value = true
  } else 
  if (token) {
    queryUserInfo()
  } else if (code) {
    unionId = await getUserInfo(code)
    queryUserInfo()
  } else {
    getBaseInfos()
  }
}

async function queryUserInfo() {
  if (token) {
    userInfoStore.setToken(token)
  }
  if (unionId) {
    userInfoStore.setUnionId(unionId)
  }
  if (unionId) {
    await queryUserInfoByUnionId()
  }
}

async function queryUserInfoByUnionId() {
  let res = await getUserInfoByUnionId(unionId)
  if (res && res.result && Object.keys(res.result).length > 0) {
    userInfoStore.settAttention(true)
    userInfoStore.setUserInfo(res.result)
    sessionStorage.setItem('userInfo', JSON.stringify(res.result))
    initWebSocket()
  } else {
    userInfoStore.settAttention(false)
  }
  queryUserInfoDone.value = true
}
onUpdated(() => {
  token = sessionStorage.getItem("token") || ''
  if (token) {
    let code = getUrlParam('code')
    if (code) {
      location.href = location.origin + location.pathname
    }
  }
})
onMounted(async () => {
  code = getUrlParam('code')
  let id = getUrlParam('paper_plane_id')
  if (id) {
    sessionStorage.setItem("paperPlaneId", id)
  }
  await init()
})
</script>

<style>
@import '@/assets/base.css';

#app {
  margin: 0 auto;
  font-weight: normal;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.xyt-app {
  margin: auto;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
header {
  line-height: 1.5;
  max-height: 100vh;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

a,
.green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.4s;
}

@media (hover: hover) {
  a:hover {
    background-color: hsla(160, 100%, 37%, 0.2);
  }
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
  margin-top: 2rem;
}

nav a.router-link-exact-active {
  color: var(--color-text);
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}

nav a:first-of-type {
  border: 0;
}

@media (min-width: 1024px) {
  body {
    display: flex;
    place-items: center;
  }

  #app {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 2rem;
  }

  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  nav {
    text-align: left;
    margin-left: -1rem;
    font-size: 1rem;

    padding: 1rem 0;
    margin-top: 1rem;
  }
}
</style>
